<template>
  <card-list :loading="loading" :finished="finished" :list="list" @refresh="onRefresh" @loadNextPage="onLoadNextPage">
    <template #list-item="{item}">
      <div class="card" @click="onClick(item)">
        <div class="top">
          <div class="title">{{ item.userName || '-' }}</div>
        </div>
        <div>
          <span class="label">人员类型</span>
          <div class="value">
            {{ MemberType.find(i => i.value === item.memberType)?.text || item.memberType || '-' }}
          </div>
        </div>
        <div>
          <span class="label">单位</span>
          <div class="value">{{ item.unit || '-' }}</div>
        </div>
        <div>
          <span class="label">管理单位</span>
          <div class="value" style="margin-bottom: 0">{{ item.manageUnit || '-' }}</div>
        </div>
      </div>
    </template>
  </card-list>
  <search-panel :options="searchOptions" @search="onSearch"></search-panel>
</template>

<script setup>
  import {MemberType, CertType, CertStatus} from '@/utils/enum.js'
  const router = useRouter()
  const loading = ref(false)
  const finished = ref(false)
  const searchOptions = ref([
    {label: '管理单位', key: 'manageUnit', type: 'field'},
    {label: '姓名', key: 'userName', type: 'field'},
    {label: '人员类型', key: 'memberType', type: 'picker', columns: MemberType},
  ])
  const paging = ref({
    pageIndex: 1,
    pageSize: 5,
  })
  const request = ref({
    userName: undefined,
  })
  const list = ref([])
  const onClick = data => {
    router.push({path: '/filingDetail', query: {id: data.id}})
  }
  const onSearch = res => {
    request.value = {
      userName: res.userName,
    }
    onRefresh()
  }
  const onRefresh = () => {
    // 清空列表数据
    finished.value = false
    paging.value.pageIndex = 1
    list.value = []
    // 重新加载数据
    onLoad()
  }
  const onLoadNextPage = () => {
    paging.value.pageIndex++
    onLoad()
  }
  const onLoad = () => {
    loading.value = true
    $post('/api/v1/filing/person/paging', {
      ...paging.value,
      request: {
        ...request.value,
        deleted: 0,
      },
    })
      .then(res => {
        const {
          data,
          paging: {totalPage},
        } = res
        list.value = list.value.concat(data)
        if (paging.value.pageIndex >= totalPage) {
          finished.value = true
        }
      })
      .catch(() => {
        finished.value = true
      })
      .finally(() => {
        loading.value = false
      })
  }
  onMounted(() => {
    onRefresh()
  })
</script>

<style lang="scss" scoped>
  .card {
    margin: 0 auto 24px;
    padding: 32px;
    position: relative;
    width: calc(686px - 32px - 32px);
    background: #ffffff;
    box-shadow: 0px 4px 24px 0px rgba(100, 101, 102, 0.12);
    border-radius: 16px 16px 16px 16px;
    font-size: 30px;
    .top {
      margin-bottom: 32px;
      .title {
        display: inline-block;
        vertical-align: middle;
        font-weight: 500;
        font-size: 34px;
        line-height: 46px;
      }
    }
    .label {
      display: inline-block;
      text-align-last: justify;
      vertical-align: top;
      white-space: nowrap;
      width: 120px;
      font-size: 30px;
      color: #969799;
      margin-right: 24px;
    }
    .value {
      display: inline-block;
      vertical-align: top;
      width: 470px;
      color: #323233;
      margin-bottom: 24px;
    }
  }
</style>
